<script setup lang="ts">
import { systemStore } from '@/stores/modules/system'
export interface FreeUseButtonProps {
  /**
   * 是否反转
   */
  reverse?: boolean
}
withDefaults(defineProps<FreeUseButtonProps>(), {
  reverse: false
})
const useSystemStore = systemStore()
const domainUrl = computed(() => useSystemStore.domain)
</script>

<template>
  <a-link
    :hoverable="false"
    v-shadow="reverse ? 'none' : { filter: 24, radius: 20 }"
    class="free-use-button hover-line"
    :class="{ 'is-reverse': reverse }"
    :href="domainUrl"
    target="_blank"
  >
    <span class="free-use-button__text">免费使用</span>

    <div class="free-use-button__icon--wrapper">
      <i class="line"></i>
      <svg
        viewBox="0 0 48 48"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        stroke="currentColor"
        class="arco-icon arco-icon-right free-use-button__icon"
        stroke-width="6"
        stroke-linecap="butt"
        stroke-linejoin="miter"
      >
        <path d="m16 39.513 15.556-15.557L16 8.4"></path>
      </svg>
    </div>
  </a-link>
</template>

<style lang="less" scoped>
.free-use-button {
  position: relative;
  display: flex;
  width: 132px;
  padding: 12px 20px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(90deg, #1462fc 0%, #07a0ff 100%);
  overflow: hidden;
  z-index: 999;
  &__text,
  &__icon {
    @apply inline-block relative z-10 text-sm;
    font-family: 'PingFang SC medium';
  }

  &__icon--wrapper {
    position: relative;
    transition: padding 200ms cubic-bezier(0.645, 0.045, 0.355, 1);
    display: flex;
    align-items: center;
    .line {
      display: inline-block;
      width: 0px;
      height: 2px;
      background-color: #fff;
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 0;
      transition: all 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
    }
  }
  &__icon {
    @apply w-3 h-3 relative z-1;
  }
  &.is-reverse {
    @apply relative overflow-hidden bg-white!;
    background-image: none;

    .free-use-button__text {
      background: linear-gradient(90deg, #1462fc 0%, #07a0ff 100%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .free-use-button__icon {
      color: #089eff;
    }

    .line {
      background-color: #089eff;
    }
  }
}
.hover-line:hover .free-use-button__icon--wrapper {
  padding-left: 6px;
  .line {
    width: 10px;
  }
}
</style>
